import React, { Component } from 'react'

export default class App extends Component {
  state = {
    desc: '',
    isAgree: '',
    city: '',
    sex: '',
  }

  handle = (e) => {
    // 只有点击复选框的时候e.target指向复选框,才会获取e.target.checked.其他的都是value
    const value =
      e.target.type === 'checkbox' ? e.target.checked : e.target.value.trim()
    const name = e.target.name
    this.setState({
      [name]: value,
    })
  }
  render() {
    return (
      <div>
        <textarea
          name="desc"
          id=""
          cols="30"
          rows="10"
          value={this.state.desc}
          onChange={this.handle}
        ></textarea>
        <input
          type="checkbox"
          name="isAgree"
          checked={this.state.isAgree}
          onChange={this.handle}
        />
        {/* select的value属性值如何和option的value相同,则对应的option会被选中 */}
        <select
          name="city"
          id=""
          value={this.state.city}
          onChange={this.handle}
        >
          <option value="sz">深圳</option>
          <option value="gz">广州</option>
          <option value="bj">北京</option>
        </select>
        <br />
        男:
        <input type="radio" name="sex" value="male" onChange={this.handle} />
        女:
        <input type="radio" name="sex" value="female" onChange={this.handle} />
      </div>
    )
  }
}
